<template>
  <view class="left-wrapper" :class="{'is-show-aside': isShowFlag}" >
    <view class="unit-overview-wrapper">
      <title-bar title="单位概况"></title-bar>
      <view class="unit-overview flex-col">
        <view class="unit-overview-top flex-row">
          <view class="circle-left">
            <text>{{ deptInfo.fraction || 0 }}<text class="text-right">分</text></text>
          </view>
          <view class="right-text flex-col">
            <view>
              <text>风险等级: <text class="wraing">{{ deptInfo.safetyLevel || '暂无风险等级' }}</text></text>
            </view>
            <text class="statistics-time">
              统计时间: {{ deptInfo.assessmentTime || '--' }}
            </text>
          </view>
        </view>
        <view class="unit-overview-bottom flex-col">
          <view>
            <text
              >单位地址:<text
                @mouseover="enter(deptInfo.deptAddress, $event)"
                @mouseout="out"
                class="text-content"
                >{{ deptInfo.deptAddress || "无" }}</text
              ></text
            >
          </view>
          <view>
            <text
              >消防责任人:<span
                @mouseover="enter(safetyAllManager, $event)"
                @mouseout="out"
                class="text-content"
                >{{ safetyManager || "无" }}</span
              ></text
            >
          </view>
        </view>
      </view>
    </view>
    <view class="device-overview-wrapper">
      <title-bar title="设备概况"></title-bar>
      <!-- 设备信息展示 -->
      <view class="device-overview">
        <view class="device-info flex-row">
          <view class="info-item">
            <view class="num blue">
              <text>{{ deviceStatusObj.totalNum }}</text>
            </view>
            <view class="device-bottom-text">
              <text>总数</text>
            </view>
          </view>
          <view class="info-item">
            <view class="num green">
              <text>{{ deviceStatusObj.normalNum }}</text>
            </view>
            <view class="device-bottom-text">
              <text>正常</text>
            </view>
          </view>
          <view class="info-item">
            <view class="num red">
              <text>{{ deviceStatusObj.alarmNum }}</text>
            </view>
            <view class="device-bottom-text">
              <text>报警</text>
            </view>
          </view>
          <view class="info-item">
            <view class="num yellow">
              <text>{{ deviceStatusObj.faultNum }}</text>
            </view>
            <view class="device-bottom-text">
              <text>故障</text>
            </view>
          </view>
          <view class="info-item">
            <view class="num greey">
              <text>{{ deviceStatusObj.offlineNum }}</text>
            </view>
            <view class="device-bottom-text">
              <text>离线</text>
            </view>
          </view>
        </view>
        <echarts v-if="buildingList.name.length > 0"
          class="echarts-wrap"
          :option="option"
          ref="echartsCav"
        ></echarts>
		<None v-else text="暂无数据" top="10%"></None>
      </view>
    </view>
    <home-left-two></home-left-two>
	<view class="left-footer-wrapper" style="overflow: hidden;">
      <view class="flex-row left-footer-content">
		<image src="/static/img/power1.png" alt="" style="margin-right: 20px;"></image>
        <image src="/static/img/power2.png"></image>
		<view style="display: flex;align-items: center;">
		  <text>技术支持：防火云</text>
        </view>
      </view>
    </view>
    <view class="show-arrow" @click="isShowFlag = !isShowFlag" >
      <image :src="'/static/'+(isShowFlag?'homeR.png':'homeL.png')" alt="" />
    </view>
    <logo-info :show.sync="logoInfoShow"></logo-info>
  </view>
</template>
<script>
import TitleBar from "./TitleBar.vue";
import echarts from "../echarts/echarts.vue";
import HomeLeftTwo from "./HomeLeftTwo.vue";
import LogoInfo from '../dealog/LogoInfo.vue';

export default {
  components: { TitleBar, echarts, HomeLeftTwo, LogoInfo },
  data() {
    return {
      showRemote: false,
      deviceStatusObj: {
        totalNum: 0,
        normalNum: 0,
        alarmNum: 0,
        faultNum: 0,
        offlineNum: 0
      }, //单位设备各种类型数量
      // echarts配置
      option: {},
      buildingList: {
        // 正常设备数量
        normalNum: [],
        // 报警设备数量
        alarmNum: [],
        faultNum: [],
        name: [],
        offlineNum: []
      },
      isShowFlag: false,
      deptInfo: {
        fraction: '',
        assessmentTime: '',
        deptAddress: '',
		safetyLevel: '',
        users: [
          {
            username: "",
            phone: ""
          }
        ]
      },
      buildId: '',
      deptId: '',
      logoInfoShow: false
    };
  },
  computed: {
    safetyManager: function () {
      const deptUsers = this.deptInfo.users || [];
      if (deptUsers.length === 0) return "无";
      const userOne = deptUsers[0].username + ": " + deptUsers[0].phone;
      if (deptUsers.length === 1) {
        return userOne;
      } else {
        return (
          userOne + ", " + deptUsers[1].username + ": " + deptUsers[1].phone + (deptUsers.length > 2 ? '...' : '')
        );
      }
    },
    safetyAllManager: function() {
      const deptUsers = this.deptInfo.users || [];
      let str = '';
      deptUsers.forEach((element) => {
        str += '用户名: ' + element.username + '\n手机号: ' + element.phone + "\n"
      })
      return str;
    },
  },
  onLoad(option){
    this.buildId=option.buildId
    this.deptId=option.deptId
  },
  created() {
    // 请求服务器数据
    this.requestDeviceStatus();
    let self=this
    //刷新
    uni.$on('globalRefresh',function(data){
      self.requestDeviceStatus();
    })
    this.requestBuildScore()
  },
  methods: {
    // 获取建筑设备数据
    requestDeviceStatus() {
      // 全部建筑的设备状态
      this.$api.getDeviceStatusNum().then(async (res) => {
        const data = await res.data;
        this.deviceStatusObj = { ...data };
      });
      // 单个建筑的设备状态
      this.$api.getlistBuildStatusNum().then(async (res) => {
        const list = await res.data;
        let self=this
        //修改刷新后图表累计添加问题
        if(self.buildingList.normalNum.length){
          self.buildingList.normalNum=[]
        }
        if(self.buildingList.alarmNum.length){
          self.buildingList.alarmNum=[]
        }
        if(self.buildingList.faultNum.length){
          self.buildingList.faultNum=[]
        }
        if(self.buildingList.offlineNum.length){
          self.buildingList.offlineNum=[]
        }
        if(self.buildingList.name.length){
          self.buildingList.name=[]
        }
        list.forEach(function(item){
          self.buildingList.normalNum.push(item.normalNum);
          self.buildingList.alarmNum.push(item.alarmNum);
          self.buildingList.faultNum.push(item.faultNum);
          self.buildingList.offlineNum.push(item.offlineNum);
          self.buildingList.name.push(item.buildingName);
        })
		self.echartsAdd();
      });
    },
    // 添加echart图表
    echartsAdd() {
      // 鼠标移入柱状图柱子的样式
      var emphasisStyle = {
        itemStyle: {
          shadowBlur: 8,
          shadowColor: "rgba(0,0,20,0.3)"
        }
      };
      // 柱状图配置
      this.option = {
        // 右上角的柱子颜色说明
        legend: {
          data: ["正常", "故障", "报警", "离线"],
          right: "5%",
          itemHeight: 4,
          itemWidth: 16,
          padding: [20, 0, 0, 0],
          textStyle: {
            color: "#98A0A7",
            fontSize: 10
          }
        },
        // 鼠标移入提示框
        tooltip: {
          backgroundColor: '#02C3FF31',
          formatter: function(params) {
            return `${params.seriesName}设备: ${params.data}个`
          }
        },
        // 横轴
        xAxis: {
          data: this.buildingList.name,
          name: "X Axis",
          axisLine: { onZero: true },
          splitLine: { show: false },
          splitArea: { show: false },
          axisLabel: {
            margin: 20,
            rotate: 25,
            color: "#98A0A7",
            fontSize: 10,
            align: "center",
            formatter: function (value) {
              return value.length <= 4 ? value : value.slice(0, 4) + "...";
            }
          },
          axisTick: {
            alignWithLabel: true,
            lineStyle: {
              color: "#98A0A7"
            }
          }
        },
        // 纵轴
        yAxis: {
          axisLabel: {
            color: "#98A0A7"
          },
          axisLine: {
            show: false
          },
		  axisTick: {
		    show: false
		  },
          splitLine: {
            lineStyle: {
              color: "#98a0a70e"
            }
          }
        },
        // 图总体
        grid: {
          bottom: "16%",
          left: "10%",
          right: "4%"
        },
        // 各个颜色柱子的配置
        series: [
          {
            name: "正常",
            type: "bar",
            stack: "one",
            emphasis: emphasisStyle,
            data: this.buildingList.normalNum,
            itemStyle: {
              color: "#00FFC4"
            },
            barWidth: "35%"
          },
          {
            name: "故障",
            type: "bar",
            stack: "one",
            emphasis: emphasisStyle,
            data: this.buildingList.faultNum,
            itemStyle: {
              color: "#FEA940"
            }
          },
          {
            name: "报警",
            type: "bar",
            stack: "one",
            emphasis: emphasisStyle,
            data: this.buildingList.alarmNum,
            itemStyle: {
              color: "#FF3D3D"
            }
          },
          {
            name: "离线",
            type: "bar",
            stack: "one",
            emphasis: emphasisStyle,
            data: this.buildingList.offlineNum,
            itemStyle: {
              color: "#CBCEDC"
            }
          }
        ]
      };
    },
    // 显示或隐藏侧边栏
    isShowAside() {
      this.isShowFlag = !this.isShowFlag;
    },
    enter(data, e) {
      this.$bus.$emit("show-tooltip", [
        {
          text: data
        },
        e.pageX,
        e.pageY
      ]);
    },
    out() {
      this.$bus.$emit("hide-tooltip");
    },
    /**
     * @description: 获取建筑分数
     * @return { Object }
     */
    async requestBuildScore() {
      let res = await this.$api.getLowestFraction()
      this.deptInfo = {...res.data}
    }
  }
};
</script>
<style lang="scss" scoped>
.left-wrapper {
  position: absolute;
  z-index: 1;
  padding-top: 0.13rem;
  width: 5.12rem;
  height: calc(100% - 80px);
  font-family: "PingFangSC-Regular";
  padding-left: 0.12rem;
  background: linear-gradient(90deg, rgba(0, 8, 18, 0.9) 0%, rgba(1, 21, 43, 0.7) 50%, transparent 100%);
  transform: translateX(0);
  transition: 0.5s;
  > view {
    margin-bottom: 2%;
  }
  .unit-overview-wrapper {
    height: 26.5%;
    .unit-overview {
      background-color: rgba(19, 117, 216, 0.1);
      height: calc(100% - 0.425rem);
      backdrop-filter: blur(5px);
      overflow-y: auto;
      .unit-overview-top {
        height: auto;
        padding: 0.15rem 0;
		margin: 0 0.25rem;
        border-bottom: 1px solid #0b69833d;
        .circle-left {
          width: 1.15rem;
          height: 1.15rem;
          background: url("../../static/icon-low.png") -0.013rem -0.013rem no-repeat;
          background-size: cover;
          text-align: center;
          line-height: 3.7;
		  margin-right: 0.15rem;
          > text {
            color: rgba(255, 255, 255, 1);
            font-size: 0.3rem;
            font-family: DINAlternate-Bold;
            white-space: nowrap;
            .text-right {
              color: rgba(255, 255, 255, 1);
              font-size: 0.15rem;
            }
          }
        }
        .right-text {
          margin-top: 0.238rem;
          > view {
            font-size: 0.23rem;
            font-family: "PingFangSC-Medium";
            line-height: 0.313rem;
            > text {
              color: rgba(255, 255, 255, 1);
              white-space: nowrap;
            overflow: hidden; //超出的文本隐藏
            text-overflow: ellipsis; //溢出用省略号显示
            }
            .wraing {
              margin-left: 0.1rem;
              color: $uni-color-warning;
            }
          }
          .statistics-time {
            color: rgba(255, 255, 255, 0.9);
            font-size: 0.18rem;
            white-space: nowrap;
            margin-top: 0.125rem;
          }
        }
      }
      .unit-overview-bottom {
        padding-left: 0.35rem;
        padding-bottom: 0.125rem;
        > view {
          margin-top: 0.125rem;
          color: #98a1a9;
          font-size: 0.175rem;
		  white-space: nowrap;
		  overflow: hidden; //超出的文本隐藏
		  text-overflow: ellipsis; //溢出用省略号显示
          .text-content {
            margin-left: 0.1rem;
            color: rgba(255, 255, 255, 0.9);
            width: 3.6rem;
          }
        }
      }
    }
  }
  .device-overview-wrapper {
    height: 35%;
    .device-overview {
      background-color: rgba(19, 117, 216, 0.1);
      padding-top: 0.1rem;
      padding-bottom: 0.08rem;
      height: calc(100% - 0.425rem);
      backdrop-filter: blur(5px);
      .device-info {
        height: 21%;
        align-items: center;
        background-color: rgba(39, 130, 202, 0.2);
        .info-item {
          width: 1rem;
          text-align: center;
          &:not(:last-child) {
            border-right: 1px solid #00ffc4;
            border-image: linear-gradient(
                180deg,
                transparent 0%,
                #13e6e500 30%,
                #13e6e680 50%,
                #13e6e500 70%,
                transparent 0%
              )
              10 10;
          }
          .device-bottom-text {
            color: #c9d0d5;
            font-size: 0.15rem;
          }
          .num {
            font-family: cursive;
            letter-spacing: -0.01rem;
            line-height: 1;
            font-size: 0.26rem;
          }
          .blue {
            color: #3de6ff;
          }
          .green {
            color: #00ffc4;
          }
          .red {
            color: #ff3d3d;
          }
          .yellow {
            color: #fab437;
          }
          .greey {
            color: #cbcedc;
          }
        }
      }
      .echarts-wrap {
        width: 5rem;
        height: calc(100% - 21%);
      }
    }
  }
  .left-footer-wrapper {
    height: 4%;
    background: rgba(19, 117, 216, 0.1);
    font-size: 0.15rem;
    color: #56646f;
    display: flex;
    align-items: center;
    padding-left: 0.32rem;
    backdrop-filter: blur(5px);
    margin: 0.1rem 0;
    cursor: pointer;
    .left-footer-content {
      image {
        height: 0.2rem;
        width: 0.79rem;
        margin-right: 0.32rem;
      }
    }
  }
  .show-arrow {
    cursor: pointer;
    position: absolute;
    top: 48%;
    left: 5.3rem;
    padding-right: 0.625rem;
    image {
      width: 0.5625rem;
      height: 0.5625rem;
    }
  }
}

.is-show-aside {
  transform: translateX(-5.12rem);
}
</style>
